<!-- 吹哨满意度统计 -->
<template>
  <div style="height: 30%">
    <JxcsTitle title="街乡吹哨案件类型统计" />
    <div class="chunk_con" id="Violations" ref="Violations"></div>
  </div>
</template>

<script>
import JxcsTitle from '@/components/JxcsTitle'
import { pad } from 'highcharts'

export default {
  components: {
    JxcsTitle
  },
  props: {
    streetCaseType: {
      type: Array,
      default: () => []
    }
  },

  watch: {
    streetCaseType(val) {
      this.getList(val)
    }
  },

  data() {
    return {
      optionData: []
    }
  },

  beforeDestroy() {
    this.desHander()
  },
  methods: {
    getList(val) {
      this.optionData = val.map((item) => {
        return {
          name: item.type,
          value: item.num
        }
      })

      this.renderChart()
    },
    renderChart() {
      const myChart = echarts.init(this.$refs.Violations)
      let self = this
      let option = {
        color: ['#FF3D6E', '#80FA50', '#FF9159', '#FFDB6A', '#62A0FD', '#DF11FC', '#FF6A72', '#00FFFE', '#008EFC'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: '1%',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 'bold'
          },
          formatter: function (name) {
            if (name) {
              const param = self.optionData.find((v) => v.name === name)
              return name + '  ' + param.value + ' %'
            }
            return
          }
        },

        grid: {
          top: 0,
          left: '10%',
          right: '9%',
          bottom: '70%',
          height: '150'
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#0a1a2a',
              borderWidth: '5'
            },
            label: {
              show: false,
              formatter: function (params) {
                return `${params.name} ${params.value}%`
              }
            },
            labelLine: {
              show: false,
              length: 20,
              lineStyle: {
                width: 2,
                type: 'border'
              }
            },
            avoidLabelOverlap: true,
            data: this.optionData
          }
        ]
      }
      myChart.setOption(option)
    },

    desHander() {
      let myChart = echarts.init(this.$refs.Violations)
      myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
.chunk_con {
  height: calc(100% - 60px);
}
</style>